<!---->
<template>
  <div class="ech">
      <div>
          <div id="echarts"></div>
          <div>总博客数</div>
      </div>
      <div>
          <div id="echarts"></div>
          <div>总用户数</div>
      </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import<组件名字> from '<组件路径>';
// 引入 ECharts 主模块
var echarts = require("echarts/lib/echarts");
// 引入柱状图
require("echarts/lib/chart/line");
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");

export default {
  //import引入的组件需要注入对象中才能用
  components: {},
  data() {
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 基于准备好的dom，初始化echarts实例
  },
  //生命周期-挂载完成（可以访问DOM元素）
  mounted() {
    // 绘制图表
    this.$nextTick(() => {
      var myChart = echarts.init(document.getElementById("echarts"));
      myChart.setOption({
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      });
    });
  },
  beforeCreate() {}, //生命周期-创建之前
  beforeMount() {}, //生命周期-挂载之前
  beforeUpdate() {}, //生命周期-更新之前
  updated() {}, //生命周期-更新之后
  beforeDestroy() {}, //生命周期-销毁之前
  destroyed() {}, //生命周期-销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个会输会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.ech{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
#echarts {
  height: 300px;
  width: 100%;
}
</style>